<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-20 11:37:17
 * @LastEditors: charles
 * @LastEditTime: 2021-10-21 10:18:21
-->
<template>
  <div class="category_list page_tem_1" v-loading="loading">
    <!-- 按钮 搜索表单 -->
    <div class="btns">
      <el-form size="small" inline :model="params">
        <el-form-item>
          <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary">搜索</el-button>
          <el-button @click="toAddHandler">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /按钮 搜索表单 -->
 
    <!-- 数据 -->
    <div class="content">
      <el-table size="small" :data="categoryData.list">
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <div class="icon_name">
              <div class="icon"><img :src="scope.row.icon" alt=""></div>
              <span class="name">{{scope.row.name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="delHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- /数据 -->

    <!-- 分页 -->
    <div class="pages">
      <el-pagination
        hide-on-single-page
        small
        background
        layout="prev, pager, next"
        @current-change="pageChangeHandler"
        :page-size="categoryData.pageSize"
        :current-page="categoryData.page"
        :total="categoryData.total">
      </el-pagination>
    </div>
    <!-- /分页 -->

    <!-- 抽屉 -->
    <el-drawer @closed="clearValidate('pc_form')" :title="title" size="50%" :visible.sync="visible">
      <div style="padding:0 .5em">
        <el-form ref="pc_form" :rules="rules" label-width="60px" :model="form" size="small">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="num">
            <el-input v-model="form.num"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-upload
              class="avatar-uploader"
              :action="baseUrl+'/file/upload'"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
              <img v-if="form.icon" :src="form.icon" class="avatar">
              <el-button type="text" v-else >上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item style="text-align:right">
            <el-button type="primary" @click="submitHandler">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- /抽屉 -->
  </div>
</template>
<script>
import {get, post} from '@/utils/request'
import _ from 'lodash'
export default {
  data(){
    return {
      baseUrl:process.env.VUE_APP_BASE_API,   // 接口基地址
      fileUrl:process.env.VUE_APP_FILE_BASE_URL,  // 文件存储地址
      visible:false,
      loading:false,
      title:"添加产品分类信息",
      params:{
        page:1,
        pageSize:5
      },    // 参数表单   查询
      form:{},      // 表单，保存/更新
      categoryData:{},
      rules:{
        name:[{ required: true,message:"请输入分类名称",trigger:'blur', }] ,
        num:[{ required: true,message:"请输入分类序号",trigger:'blur', }] ,
      }
    }
  },
  mounted(){
    this.loadCategories();
  },
  methods:{
    delHandler({id}){
      // 1. 询问
      this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        // 2. 删除
        let url = "/productCategory/deleteById"
        get(url,{id}).then(resp =>{
          this.$message.success(resp.message)
          this.loadCategories();
        })
      })
    },
    editHandler(row){
      this.title = "修改产品分类信息"
      this.form = _.cloneDeep(row);
      this.visible = true;
    },
    clearValidate(ref){
      this.$refs[ref].clearValidate();
    },
    // 提交
    submitHandler(){
      this.$refs.pc_form.validate(valid =>{
        if(valid){
          let url = "/productCategory/saveOrUpdate"
          post(url,this.form).then(resp =>{
            this.$message.success(resp.message)
            this.visible = false;
            this.loadCategories();
          })
        }
      })
    },
    // 附件上传处理
    handleUploadSuccess(resp){
      if(resp.status === 200){
        let {id,groupName} = resp.data;
        let icon_url = this.fileUrl+groupName+'/'+id;
        // this.form.icon = icon_url;
        // this.form = _.cloneDeep(this.form);
        this.$set(this.form,'icon',icon_url)
      } else {
        this.$message({type:'error',message:resp.message})
      }
    },
    // 去保存
    toAddHandler(){
      this.form = {};
      this.title = "添加产品分类信息"
      this.visible = true;
    },
    // 加载栏目数据
    loadCategories(){
      this.loading = true;
      let url = "/productCategory/pageQuery"
      get(url,this.params).then(resp => {
        this.categoryData = resp.data;
      }).finally(()=>{
        this.loading = false;
      })
    },
    // 分页变动处理函数
    pageChangeHandler(page){
      this.params.page = page;
      this.loadCategories()
    }
  }
}
</script>
<style lang="scss" scoped>
.category_list {
  .content {
    .icon_name {
      display: flex;
    }
    .icon_name {
      .icon {
        flex-basis: 30px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .name {
        flex: 1;
        padding:0 .5em
      }
    }
  }
  
}
</style>